<template>
<!-- <movable-area style="width: 100vw; height: 600px; background: red;">
  <movable-view class="move-view"> -->
    <view class="tip-box">
      <image class="icon-tip" src="../../static/IP.png"></image>
      <view class="tip-content" v-if="showContent && allContent">
        <image class="icon-qipao" src="../../static/icon-qipao.png"></image>
        <view class="content">
          <image class="icon-close" src="../../static/icon-close.png" @tap="handleCloseCon"></image>
            <scroll-view>
              <view class="content-txt">
                {{allContent}}
              </view>
            </scroll-view>
        </view>
      </view>
    </view>
  <!-- </movable-view>
</movable-area> -->
</template>

<script setup name="BottomDrawer">
import { onLaunch, onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { reactive, ref, toRefs, watch, onMounted, getCurrentInstance } from "vue"
import { storeToRefs } from "pinia";
import { useChatStore } from "../../store/chat";
import { useRunInfoStore } from "../../store/runInfo";
const useRunInfoData = useRunInfoStore()
const useChatData = useChatStore()
const appInstance = getCurrentInstance().proxy
const { allContent, showContent } = storeToRefs(useChatData)
const { isShowCountdown } = storeToRefs(useRunInfoData)
const props = defineProps({

})

const { tipTxt }  = toRefs(props)

const state = reactive({
})

const alertDialogRef = ref(null)

const handleCloseCon = () => {
  state.showContent = false
  useChatData.setShowContent(false)
}

onShow(() => {

})

watch(
  () => isShowCountdown.value,
  (newValue, oldValue) => {
    if(!newValue) {
      console.log("计时器结束")
      useChatData.setShowContent(false)
    }
  },
  { imediate: true }
);


</script>

<style lang="scss">
.move-view{
  width: calc(100vw - 64rpx);
}
.tip-box{
  width: calc(100vw - 64rpx);
  display: flex;
  position: fixed;
  top: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  .icon-tip{
    width: 124rpx;
    height: 132rpx;
    flex-shrink: 0;
  }
  .tip-content{
    display: flex;
    margin-left: 16rpx;
    position: relative;
    .icon-qipao{
      width: 16rpx;
      height: 26rpx;
      position: absolute;
      top: 36rpx;
      left: -16rpx;
    }
    .content{
      width: calc(100vw - 200rpx);
      padding: 32rpx;
      background: rgba(0,44,34,0.6);
      border-radius: 16rpx;
      box-sizing: border-box;
      position: relative;
      .icon-close{
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 0;
        top: 0;
      }
      .content-txt{
        max-height: 384rpx;
        overflow-x:hidden;
        overflow-y:scroll;
        white-space: pre-wrap;
        font-family: PingFangSC, PingFang SC;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        word-break: break-all;
      }
    }
  }
}
</style>
